import React from 'react'
import { HashRouter,Switch,Route,Redirect } from 'react-router-dom'
import Loading from '@/components/Loading'
// 导入样式
import '@/App.scss'
// 导入token
import { getToken } from '@/utils'
// 定义动态组件
const Login = React.lazy(()=>import('@/pages/Login'))
const Layout = React.lazy(()=>import('@/pages/Layout'))

// 封装AuthRoute组件
// 功能： 登录就正常渲染Route，未登录就渲染Redirect
const AuthRoute = (props)=>{
  const token = getToken()
  return token ? <Route {...props}>{props.children}</Route> : <Redirect to='/login'/>
}

const App = () => {
  return (
    <HashRouter>
      <React.Suspense fallback={ <Loading/> }>
        <Switch>
          <Route path='/login' component={Login} ></Route>
          {/* 模糊的，我们可以放在下面； / 不能是严格模式，因为它里面有二级路由 */}
          <AuthRoute  path='/' component={Layout} />
        </Switch>
      </React.Suspense>
    </HashRouter>
  )
}

export default App